<template>
  <div class="resource-item clearfix">
    <span :class="'title ' + titleIcon(value.ext)">
      <a :href="'#/resource/preview/'+value.id+(isListen ? '?type=listen' : '')">{{value.title}}</a>
    </span>
    <span class="info">
      <span>作者：{{value.author}}</span>
      <span>上传：{{value.uploader}}</span>
      <span>格式：{{value.ext}}</span>
      <span>资源大小：{{value.size}}M</span>
      <span>浏览：{{value.download}}</span>
      <span>
        {{value.price}}{{value.yd_type === 0 ? '普通' : value.yd_type === 1 ? '钻石' : ''}}语点
      </span>
    </span>
    <input class="url" type="text" :id="'download_url_' + value.id" :value="appOrigin + '#/resource/download/' + value.id"/>
    <span class="option">
      <a href="javascript:;" title="收藏" @click="handleCollect">
        <i :class="value.collected ? 'xyd-collection_a animated bounce' : 'xyd-collection2'"></i>
      </a>
      <a href="javascript:;" title="下载" @click="handleDownload">
        <i class="xyd-download2" ></i>
      </a>
      <a href="javascript:;" title="预览" @click="handlePreview">
        <i :class="isListen ? 'xyd-player2' : 'xyd-preview2'" ></i>
      </a>
      <a href="javascript:;" title="分享" @click="handleShare">
        <i class="xyd-share2" ></i>
      </a>
    </span>
  </div>
</template>

<script>
import { collect } from 'api/resource'
export default {
  name: 'resourceItem',
  data() {
    return {
      appOrigin: process.env.APP_ORIGIN,
      collected: false,
      collectedStatus: 'xyd-collection_a'
    };
  },
  props: {
    value: {
      type: Object,
      default() {
        return {/*  */}
      }
    },
    isListen: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    titleIcon(ext) {
      const types = {
        word: ['doc', 'docx', 'word'],
        ppt: ['ppt'],
        pdf: ['pdf'],
        excel: ['xlsx'],
        video: ['mp4', 'MP4', 'mkv'],
        music: ['mp3', 'MP3'],
        zip: ['zip', 'rar']
      }
      for (const key in types) {
        if (types[key].filter(v => v === ext).length > 0) {
          return key
        }
      }
      return ''
    },
    handleCollect() {
      const { id, catid, title, price, yd_type } = this.value
      if (!this.$store.state.user.uid) {
        this.$message({
          message: '需要登录',
          type: 'warning'
        })
        return false
      }
      this.value.collected = true
      const ids = this.$store.state.category.top.filter(v => v.id = catid)
      let cat
      if (ids && ids.length !== 0) {
        cat = ids[0].name
      }
      collect({
        rsid: id,
        cat,
        rsname: title,
        price: price + (yd_type === 0 ? '普通' : yd_type === 1 ? '钻石' : '普通')
      })
      .then(res => console.log(res))
      .catch(err => {
        this.value.collected = false
        this.$message({
          message: err.msg,
          type: 'error'
        })
      })
    },
    handleDownload() {
      this.$router.push('/resource/download/' + this.value.id)
    },
    handlePreview() {
      this.$router.push('/resource/preview/' + this.value.id + (this.isListen ? '?type=listen' : ''))
    },
    handleShare() {
      const did = document.getElementById('download_url_' + this.value.id)
      did.select()
      document.execCommand('copy', true)
      this.$message({
        message: '资源链接已成功复制到剪贴板，快去分享吧~',
        type: 'success'
      })
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .resource-item{
    padding: 30px 0;
    border-bottom: 1px solid #e5e6e7;
    .title{
      display: inline-block;
      line-height: 25px;
      padding-left: 25px;
      background-image: url('../../assets/common_images/doc.png');
      background-repeat: no-repeat;
      background-size: 24px;
      vertical-align: middle;
      width: 200px;
      word-break: break-all;//截断，中文无影响，英文会直接截断，或者用normal
      overflow: hidden;//溢出隐藏
      text-overflow: ellipsis;//省略号
      white-space: nowrap;//不换行
      >a:hover{
        text-decoration: underline;
        color: #00A2EA;
      }
    }
    .word{
      background-image: url('../../assets/common_images/doc.png');
    }
    .ppt{
      background-image: url('../../assets/common_images/ppt.png');
    }
    .pdf{
      background-image: url('../../assets/common_images/pdf.png');
    }
    // .excel{
    //   background-image: url('../../assets/common_images/excel.png');
    // }
    .zip{
      background-image: url('../../assets/common_images/rar.png');
    }
    .music{
      background-image: url('../../assets/common_images/mp3.png');
    }
    .video{
      background-image: url('../../assets/common_images/video.png');
    }
    .info{
      display: inline-block;
      vertical-align: middle;
      font-size: 12px;
      color: #999;
      margin-left: 10px;
      width: 500px;
      word-break: break-all;//截断，中文无影响，英文会直接截断，或者用normal
      overflow: hidden;//溢出隐藏
      text-overflow: ellipsis;//省略号
      white-space: nowrap;//不换行
      >span{
        margin-right: 10px;
      }
    }
    .option{
      float: right;
      >a{
        padding: 0 10px;
      }
    }
    .url{
      opacity: 0;
      position: absolute;
      z-index: -1;
    }
  }
</style>